<template>
  <div>
    <a-date-picker
      v-model="startValue"
      :locale="locale"
      :disabled-date="disabledStartDate"
      show-time
      format="YYYY-MM-DD HH:mm:ss"
      placeholder="开始时间"
      @openChange="handleStartOpenChange"
      :defaultValue="defaultStartValue"
    />
    -
    <a-date-picker
      v-model="endValue"
      :locale="locale"
      :disabled-date="disabledEndDate"
      show-time
      format="YYYY-MM-DD HH:mm:ss"
      placeholder="结束时间"
      :open="endOpen"
      @openChange="handleEndOpenChange"
      :defaultValue="defaultEndValue"
    />
  </div>
</template>
<script>
import moment from 'moment';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
export default {
    name:"selectTime",
    props:{defaultTime:Array},
    created(){
        this.defaultStartValue=this.defaultTime[0]
        this.defaultEndValue=this.defaultTime[1]
        this.startValue=this.defaultTime[0]
        this.endValue=this.defaultTime[1]
    },
    data() {
        return {
            locale,
            startValue: null,
            endValue: null,
            endOpen: false,
            defaultStartValue:null,
            defaultEndValue:null,
        };
    },
    watch: {
        startValue() {
            this.$emit('changeTime',this.startValue,this.endValue)
        },
        endValue() {
           this.$emit('changeTime',this.startValue,this.endValue)
        },
    },
    methods: {
        moment,
        range(start, end) {
            const result = [];
            for (let i = start; i < end; i++) {
                result.push(i);
            }
            return result;
        },
        disabledStartDate(current) {
            return current && current < new Date().getTime()-8640;
        },
        disabledEndDate(endValue) {
            const startValue = this.startValue;
            if (!endValue || !startValue) {
                return false;
            }
            return startValue.valueOf() >= endValue.valueOf();
        },
        handleStartOpenChange(open) {
            if (!open) {
                this.endOpen = true;
            }
        },
        handleEndOpenChange(open) {
            this.endOpen = open;
            if(!this.startValue){
                this.startValue=this.defaultStartValue
            }else if(!this.endValue){
                this.endValue=this.defaultEndValue
            }else{
                this.$emit('changeTime',this.startValue,this.endValue)
            }
        },
    },
};
</script>